<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们图片</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <style>

    </style>
</head>
<body style="height: 100%">
<div style="width:80%;height:100%;margin:15px auto;background-color: white;padding: 20px">
    <form class="layui-form" action="">
        <div style="text-align: center">
            <h1>联系我们图片</h1>
        </div>
        <!-- 图片上传 -->
        <div class="layui-upload" style="text-align: center">
            <button type="button" class="layui-btn" id="test" style="" >上传图片</button>
            <div class="layui-upload-list" style="display: inline;margin-left: 20px;">
                <img class="layui-upload-img" name="guanyu" id="guanyu" style="max-width: 400px" src="/image/no.jpg">
                <span style="color: red;display: inline-block">建议图片宽度600px以上</span>
            </div>

            <input type="hidden" class="input-text" id="picture" name="picture">
        </div>

        <div class="layui-form-item" style="margin-top: 20px;text-align: center">
            <div class="layui-input-block" id="addBtn" style="margin: 0px">
                <button class="layui-btn" id="addWuye" lay-submit lay-filter="addWuye">立即添加</button>
            </div>
            <div class="layui-input-block" id="updateBtn" style="display: none;margin: 0px">
                <button class="layui-btn" id="update" lay-submit lay-filter="update">确认修改</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    var $ = layui.jquery;
    var layer = layui.layer;
    var isExit = 0;//判断是否已有图片

    window.onload = function(){
        layer.load(2);
        $.ajax({
            url:"/guanyu/getGuanyu2",
            type:'get',
            success:function (result) {
                if (result.code==200){
                    isExit=1;
                    $("#addBtn").hide();
                    $("#updateBtn").show();
                    $("#picture").val(result.data.picture);
                    $("#guanyu").attr("src",result.data.picture);
                }else if (isExit==0){
                    isExit=0;
                    $("#addBtn").show();
                    $("#updateBtn").hide();
                }
            }
        })
        layer.closeAll();
    }

    layui.use(['form' , 'jquery' , 'upload'], function() {
        var form = layui.form;

        var upload = layui.upload;

        //新增
        form.on('submit(addWuye)',function(data){
            if (isExit==0){
                console.log(data.field);
                if (data.field.picture.length==0){
                    layer.msg("请先上传图片",{icon:2,time:1500});
                    return false;
                }
                layer.load();
                $.ajax({
                    url:'/guanyu/addGunayu2',
                    type:'POST',
                    contentType: 'application/json',
                    data:JSON.stringify(data.field),
                    success:function (result) {
                        if(result.code==200){
                            layer.msg("新增成功");
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else {
                            layer.msg(result.msg,{icon:2,time:1500});
                        }
                    }
                });
                layer.closeAll();
            }
            return false;
        })

        //修改
        form.on('submit(update)',function(data){
            console.log(isExit);
            if (isExit==1){
                console.log(data.field);
                if (data.field.picture.length==0){
                    layer.msg("请先上传图片",{icon:2,time:1500});
                    return false;
                }
                layer.load();
                $.ajax({
                    url:'/guanyu/update2',
                    type:'POST',
                    data:{picture:data.field.picture},
                    success:function (result) {
                        if(result.code==200){
                            layer.msg("修改成功");
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else {
                            layer.msg(result.msg,{icon:2,time:1500});
                        }
                    }
                });
                layer.closeAll();
            }
            return false;
        })

        //bg上传
        var uploadInst = upload.render({
            elem: '#test'
            , url: '/admin/upload/uploadimg' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#guanyu').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //判断上传是否成功
                if (res.code == 0) {
                    $("#picture").val(res.data);
                    return layer.msg('上传成功！');
                }else{
                    return layer.msg('上传失败！');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });


</script>
</html>